<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>《原神》官网-米哈游全新开放世界</title>
    <link data-n-head="true" rel="icon" type="image/x-icon" href="images/favicon.ico" />
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/join.css" />
    <link rel="stylesheet" href="./css/lunbotu.css">
    <link rel="stylesheet" href="./css/footer.css" />
</head>

<body>

    <!--背景图片  -->
    <div class="music">
        <ul>
            <li class="star">
                <img src="./images/Z_3.png" alt="" class="musics">
            </li>
            <li>
                <a href="Home.html"><img src="./images/Z_4.png" alt=""></a>
            </li>
        </ul>
    </div>
    <div class="pc">
        <div class="bgc">
            <!-- 头部 -->
            <div class="header">
                <ul class="clearfix">
                    <!-- 头部左边 -->
                    <li class="header_left">
                        <a href="#">
                            <img src="./images/Z_2.png" alt="" />
                        </a>
                    </li>
                    <!-- 头部右边2 -->
                </ul>
            </div>

            <!-- 上部 -->
            <div class="top">
                <img src="./images/Z_5.png" alt="" />
            </div>

            <!-- 按钮 -->
            <div class="btn">
                <img src="./images/Z_6.png" alt="" class="video_btn" />
            </div>

            <!--下载 -->
            <div class="download">
                <!-- 电脑端下载 -->
                <div class="pc_download">
                    <img src="./images/Z_7.png" alt="" / class="header_left-pic1">
                </div>
                <!-- 移动端下载 -->
                <div class="mobile_download">
                    <img src="./images/Z_8.png" alt="" />
                    <img src="./images/Z_9.png" alt="" />
                </div>
                <!-- 应用商店下载 -->
                <div>
                    <img src="./images/Z_10.png" alt="" />
                    <img src="./images/Z_11.png" alt="" />
                </div>
                <!-- 扫码下载 -->
                <div class="pc_Scan">
                    <img src="./images/Z_12.png" alt="" />
                </div>
            </div>
        </div>

        <!-- 公测情报 -->
        <img src="./images/Z_13-1.png" alt="" class="list_one" />
        <div class="list">
            <div class="item-1">
                <img src="./images/Z_14.png" alt="" class="item-1_img" />
                <img src="./images/Z_15.png" alt="" class="item-title" />
                <img src="./images/Z_16.png" alt="" class="item-desc" />
            </div>
            <div class="item-1">
                <img src="./images/Z_17.png" alt="" class="item-1_img" />
                <img src="./images/Z_18.png" alt="" class="item-title" />
                <img src="./images/Z_19.png" alt="" class="item-desc" />
            </div>
            <div class="item-1">
                <img src="./images/Z_20.png" alt="" class="item-1_img" />
                <img src="./images/Z_21.png" alt="" class="item-title" />
                <img src="./images/Z_22.png" alt="" class="item-desc" />
            </div>
            <div class="item-1">
                <img src="./images/Z_23.png" alt="" class="item-1_img" />
                <img src="./images/Z_24.png" alt="" class="item-title" />
                <img src="./images/Z_25.png" alt="" class="item-desc" />
            </div>

            <div class="item-1">
                <img src="./images/Z_26.png" alt="" class="item-1_img" />
                <img src="./images/Z_27.png" alt="" class="item-title" />
                <img src="./images/Z_28.png" alt="" class="item-desc" />
            </div>

            <div class="item-1">
                <img src="./images/Z_29.png" alt="" class="item-1_img" />
                <img src="./images/Z_30.png" alt="" class="item-title" />
                <img src="./images/Z_31.png" alt="" class="item-desc" />
            </div>

            <div class="item-1">
                <img src="./images/Z_32.png" alt="" class="item-1_img" />
                <img src="./images/Z_33.png" alt="" class="item-title" />
                <img src="./images/Z_34.png" alt="" class="item-desc" />
            </div>

            <div class="item-1">
                <img src="./images/Z_35.png" alt="" class="item-1_img" />
                <img src="./images/Z_36.png" alt="" class="item-title" />
                <img src="./images/Z_37.png" alt="" class="item-desc" />
            </div>
        </div>


        <!-- 游戏特色 -->
        <div class="pc-ch">

            <img src="./images/Z_38.png" alt="" class="pc-ch_title" />
            <!-- 轮播图 -->
            <div class="banner-card">
                <ul class="ul">
                    <li><img src="./images/Z_41.png" alt="" /></li>
                    <li><img src="./images/Z_42.png" alt="" /></li>
                    <li><img src="./images/Z_43.png" alt="" /></li>
                    <li><img src="./images/Z_44.png" alt="" /></li>
                    <li><img src="./images/Z_45.png" alt="" /></li>
                </ul>

                <div class="Big_nav">
                    <div class="left-btn">
                        <span><img src="./images/Z_left_select.png" alt="" class="left_img_one"
              /></span>
                        <span><img src="./images/Z_left.png" alt="" class="left_img_two"
              /></span>
                    </div>
                    <div class="right-btn">
                        <span><img src="./images/Z_right_select.png" alt="" class="right_img_one"
              /></span>
                        <span><img src="./images/Z_right.png" alt="" class="right_img_two"
              /></span>
                    </div>
                </div>
            </div>


            <script src="./js/jquery-1.11.0.min.js"></script>
            <script>
                $(".left-btn").mousemove(function() {
                    $(".left_img_two").css("opacity", "0");
                });

                $(".left-btn").mouseout(function() {
                    $(".left_img_two").css("opacity", "1");
                });

                $(".right-btn").mousemove(function() {
                    $(".right_img_two").css("opacity", "0");
                });

                $(".right-btn").mouseout(function() {
                    $(".right_img_two").css("opacity", "1");
                });
                class bannerCard {
                    constructor(options) {
                        // 存储默认值
                        this.default = {
                            classArray: ["one", "two", "three", "four", "five"],
                            leftSlider: true,
                        };
                        // options覆盖默认值
                        Object.assign(this.default, options);

                        this.bannerWrap = document.getElementsByClassName("banner-card")[0];
                        this.lis = this.bannerWrap.getElementsByTagName("li");
                        this.time = null;
                        // 将类数组转化为数组（ES6用法）
                        this.lisArray = Array.from(this.lis);
                        this.classlist = this.default.classArray;
                        this.leftSlider = this.default.leftSlider;
                        this.leftBtn = document.getElementsByClassName("left-btn")[0];
                        this.rightBtn = document.getElementsByClassName("right-btn")[0];

                        this.init();
                    }
                    init() {
                        // li的class进行初始化操作
                        this.initLiClass();
                        this.startTimer();

                        // 鼠标移入移出
                        this.listenMouseEvent();
                        // 鼠标点击按钮事件
                        this.listenMouseClickBtnEvent();
                    }

                    // 开始定时器
                    startTimer() {
                        this.timer();
                    }

                    // 清除定时器
                    clearTimer() {
                        clearInterval(this.time);
                    }

                    // li的class进行初始化操作
                    initLiClass() {
                        this.move(this.classlist);
                    }

                    // 定时器
                    timer() {
                        let self = this;
                        if (self.leftSlider) {
                            self.time = setInterval(self.leftMove.bind(this), 3000);
                        } else {
                            self.time = setInterval(self.rightMove.bind(this), 3000);
                        }
                    }

                    // 运动函数
                    move(list) {
                        let self = this;
                        self.lisArray.forEach((value, index) => {
                            value.setAttribute("class", list[index]);
                        });
                    }

                    // 向左运动
                    leftMove() {
                        let self = this;
                        let popValue = self.classlist.pop();
                        self.classlist.unshift(popValue);
                        self.move(self.classlist);
                    }

                    // 向右运动
                    rightMove() {
                        let self = this;
                        let shiftValue = self.classlist.shift();
                        self.classlist.push(shiftValue);
                        self.move(self.classlist);
                    }

                    /*
                     *  下边是鼠标的操作
                     */
                    // 监听鼠标移入移出事件
                    listenMouseEvent() {
                        // let self = this;
                        // // 添加鼠标移入触发事件
                        // self.bannerWrap.addEventListener('mouseover', () => {
                        //     self.clearTimer();
                        //     self.leftBtn.style.cssText = `left: 60px; opacity: 1`;
                        //     self.rightBtn.style.cssText = `right: 60px; opacity: 1`
                        // });
                        // // 添加鼠标移出触发事件
                        // self.bannerWrap.addEventListener('mouseout', () => {
                        //     self.startTimer();
                        //     self.leftBtn.style.cssText = `left: 20px; opacity:1`;
                        //     self.rightBtn.style.cssText = `right: 20px; opacity:1`;
                        // })
                    }

                    // 鼠标点击左右按钮事件
                    listenMouseClickBtnEvent() {
                        let self = this;
                        // 左点击事件
                        self.leftBtn.addEventListener("click", () => {
                            self.leftMove();
                        });

                        //右点击事件
                        self.rightBtn.addEventListener("click", () => {
                            self.rightMove();
                        });
                    }
                }

                // 可传入一个对象， 对象属性包含classArray: 一个数组。leftSlider: 布尔值
                new bannerCard();
            </script>



        </div>



        <!-- 关于我们 -->

        <div class="pc-follow">
            <img src="./images/Z_50.png" alt="" class=".pc-follow_title" />

            <div class="pc-follow__list">
                <a href="" target="_blank" class="pc-follow__item">
                    <img src="./images/Z_51.png" alt="" class="pc-follow__item-weibo" />
                    <img src="./images/Z_51-1.png" alt="" class="pc-follow__item-weibo1" />
                </a>

                <div class="pc-follow__item">
                    <img src="./images/Z_52.png" alt="" class="pc-follow__item-weixin" id="" />

                    <img src="./images/Z_52-1.png" alt="" class="pc-follow__item-weixin1" />
                </div>

                <a href="" target="_blank" class="pc-follow__item">
                    <img src="./images/Z_53.png" alt="" class="pc-follow__item-weibo" />
                    <img src="./images/Z_53-1.png" alt="" class="pc-follow__item-weibo1" />
                </a>

                <a href="" target="_blank" class="pc-follow__item">
                    <img src="./images/Z_54.png" alt="" class="pc-follow__item-weibo" />
                    <img src="./images/Z_54-1.png" alt="" class="pc-follow__item-weibo1" />
                </a>
            </div>
        </div>





        <!-- 页尾 -->

        <footer class="footer">
            <ul class="footer_socialbar">
                <li class="footer_item weibo"></li>
                <li class="footer_item qq"></li>
                <li class="footer_item weixin"></li>
                <li class="footer_item share"></li>
            </ul>
            <div class="share_wrap">
                <p>分享至</p>
                <ul style="margin-left: 34px">
                    <li style="background-position: -74px -74px"></li>
                    <li style="background-position: -74px -10px"></li>
                    <li style="background-position: -138px -138px"></li>
                    <li style="background-position: -10px -138px"></li>
                </ul>
            </div>
            <div id="footer_top">
                <div>
                    <div class="mihoyo-cn-footer mihoyo-cn-footer-ys-mihoyo">
                        <div class="footer_content">
                            <div class="footer_logo">
                                <ul>
                                    <li>
                                        <div style="display: flex; align-items: center">
                                            <img src="./images/Z_footer-mihoyo.png" style="width: auto; height: 42px" />
                                            <span></span>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <img src="./images/Z_footer-logo.png" style="width: 110px; height: auto" />
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="footer_info">
                                <div class="footer_link">
                                    <div class="footer_protocol">
                                        <div>
                                            <a href="https://ys.mihoyo.com/company/agreement" class="protocol" target="_blank">用户协议</a
                        >
                        |
                        <a
                          href="https://ys.mihoyo.com/company/privacy"
                          class="protocol"
                          target="_blank"
                          >隐私政策</a
                        >
                        |
                        <a
                          href="https://jiazhang.mihoyo.com/#/"
                          class="protocol"
                          target="_blank"
                          >家长监护工程</a
                        >
                        |
                        <a
                          href="http://www.mihayou.com/company.html"
                          target="_blank"
                          class="about-us protocol"
                          >关于我们</a
                        >
                        |
                        <a
                          href="http://www.mihayou.com/contact.html"
                          target="_blank"
                          class="contract-us protocol"
                          >联系我们</a
                        >
                        |
                        <a
                          href="http://www.mihayou.com/add.html"
                          target="_blank"
                          class="join-us protocol"
                          >加入我们</a
                        >
                      </div>
                    </div>
                  </div>

                  <div class="footer_advice">
                    <p class="advice_info">
                      健康游戏忠告：抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。
                    </p>
                    <div class="inline_info">
                      <a
                        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010402001113"
                        class="footer-filing-item"
                        target="_blank"
                        >沪公网安备31010402001113号</a
                      >
                      <span class="split_line"> | </span>
                      <span class="footer_filing_item"
                        >增值电信业务经营许可证：沪B2-20190555</span
                      >
                    </div>
                  </div>

                  <div class="footer_filing">
                    <div class="footer_filing_content">
                      <a
                        href="https://beian.miit.gov.cn/#/Integrated/index"
                        target="_blank"
                        class="footer-filing-item"
                        >沪ICP备19018275号-4</a
                      >
                      <span class="split_line"> | </span>
                      <span> 沪网文〔2019〕3168-216号 </span>
                      <span class="split_line"> | </span>
                      <span>国新出审【2019】2978号</span>
                    </div>
                    <div class="footer_filing_tip">
                      <span>互联网违法不良信息举报邮箱: tousu@mihoyo.com </span>
                      <span
                        >互联网违法不良信息举报电话: 021-34203135
                        （工作时间：每天10点 - 20点）</span
                      >
                    </div>
                  </div>

                  <div class="footer-tip">
                    亲爱的市民朋友，上海警方反诈劝阻电话“962110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听。
                  </div>

                  <div class="mihoyo-copyright">
                    ©2012-2020 上海米哈游影铁科技有限公司版权所有
                  </div>

                  <div class="footer_icon">
                    <a
                      href="https://v.yunaq.com/certificate?domain=www.mihoyo.com&amp;from=label&amp;code=90020"
                      target="_blank"
                      ><img src="./images/Z_footer-icon1.png" alt=""
                    /></a>
                                            <a href="http://www.shjbzx.cn/" target="_blank"><img src="./images/Z_footer-icon2.png" alt="" /></a>
                                            <a href="https://www.12377.cn/" target="_blank"><img src="./images/Z_footer-icon3.png" alt="" /></a>
                                            <a href="http://sq.ccm.gov.cn/ccnt/sczr/service/business/emark/toDetail/8955A9DDE1FF8B6CE053010A14ACA87F" target="_blank"><img src="./images/footer-icon4.png" alt="" /></a>
                                            <a href="#" target="_blank"><img src="./images/Z_footer-icon5.png" alt="" /></a>
                                            <a href="http://wap.scjgj.sh.gov.cn/businessCheck/verifKey.do?showType=extShow&serial=9031000020190314100540000004452331-SAIC_SHOW_310000-20200120150237277642&signData=MEYCIQCjn9IhIKfUHjPlx9W6xrYPZ4GA73Blopwp0iEzSX0OHQIhAOZm3tnlWLrgVXMtvgp5OibauIgiAa+2d+MQ7qzMIm6t"
                                                target="_blank"><img src="./images/Z_footer-icon6.png" alt="" /></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
        </footer>





        </div>
        <div class="videos" style="display: none;">
            <video width="896" height="594" controls="controls" autoplay="autoplay">
                <source src="./video/liyuepv_1592450428_5720.mp4" type="" />
              
              </video>
        </div>


</body>

</html>
<script src="./js/jquery.min.js"></script>
<script>
    $(function() {
        $(".share")
            .mouseover(function() {
                $(".share_wrap").show();
            })
            .mouseout(function() {
                $(".share_wrap").hide();
            })
        setInterval(function() {

        }, 1000)

        var flag = true;
        $(".star").click(function() {
            // $(".musics").toggle(function() {
            //     $(this).attr("src", "./images/3.png");
            // }, function() {
            //     $(this).attr("src", "./images/stop.png");
            // }).attr("src", "./images/3.png");
            if (flag) {
                $(".musics").attr("src", "./images/Z_3.png");
                flag = false;
            } else {
                $(".musics").attr("src", "./images/Z_stop.png");
                flag = true;
            }
        })
        var movie = document.querySelector("video")
        $(".video_btn").click(function() {
            $(".videos").show()
            movie.play();
            setTimeout(function() {
                $(".videos").hide()
                movie.pause();
            }, 114000)
        })

        $(".videos").click(function() {
            $(".videos").hide()
            movie.pause();
        })
    })
</script>